<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Example</title>
    <style>
        body {
            display: flex;
            justify-content: space-between;
        }
        .left, .right {
            width: 45%;
        }
        .console-output, .messages-output {
            border: 1px solid #ccc;
            padding: 10px;
            height: 400px;
            overflow-y: auto;
            white-space: pre-wrap;
        }
        .button-container {
            margin-bottom: 10px;
        }
        button{
            font-size: large;
            margin: 10px 5px;
        }

    </style>
    <script>
        function overrideConsole() {
            const consoleOutput = document.getElementById('consoleOutput');
            
            function logToPage(type, args) {
                const message = Array.from(args).map(arg => typeof arg === 'object' ? JSON.stringify(arg) : arg).join(' ');
                const logEntry = document.createElement('div');
                logEntry.textContent = `[${type.toUpperCase()}] ${message}`;
                consoleOutput.appendChild(logEntry);
                consoleOutput.scrollTop = consoleOutput.scrollHeight;
            }

            ['log', 'error', 'warn', 'info'].forEach(type => {
                const original = console[type].bind(console);
                console[type] = function() {
                    logToPage(type, arguments);
                    original.apply(console, arguments);
                };
            });
        }

        let ws;

        function connectWebSocket() {
            // 修改这里
            // ws = new WebSocket('ws://123.58.220.74:22221');
            ws = new WebSocket('ws://127.0.0.1:22221');

            ws.onopen = function() {
                console.log('WebSocket is connected.');
                document.getElementById('status').innerText = 'Connected';
            };

            ws.onmessage = function(event) {
                console.log('Received:', event.data);
                document.getElementById('messages').innerText += event.data + '\n';
            };

            ws.onclose = function() {
                console.log('WebSocket is closed.');
                document.getElementById('status').innerText = 'Disconnected';
            };

            ws.onerror = function(error) {
                console.error('WebSocket Error:', error);
            };
        }

        function sendMessage(text) {
            if (ws && ws.readyState === WebSocket.OPEN) {
                const message = {
                    action: "ExecuteAutoJs",
                    comm: {
                        deviceIds: 'all',
                        filePath: 'D:\\a-project\\602--项目\\同步助手\\autojs\\auto\\'+text +'.js'
                    }
                };
                ws.send(JSON.stringify(message));
                console.log('Sent:', message);
            } else {
                console.error('WebSocket is not open.');
            }
        }

        function clearConsole() {
            document.getElementById('consoleOutput').innerHTML = '';
        }

        function clearMessages() {
            document.getElementById('messages').innerHTML = '';
        }

        window.onload = function() {
            overrideConsole();
            connectWebSocket();
        };
    </script>
</head>
<body>
    <div class="left">
        <h1>WebSocket Example</h1>
        <p id="status">Connecting...</p>
        <div>
            <button onclick="sendMessage('tiktok')">Tiktok脚本</button>
            <button onclick="sendMessage('facebook_reels')">facebook脚本</button>
            <button onclick="sendMessage('instagram_reels')">instagram脚本</button>
            <button onclick="sendMessage('youtube')">youtube脚本</button>
            <button onclick="sendMessage('init')">init脚本</button>
            <button onclick="sendMessage('test')">测试脚本</button>
        </div>
        <div class="button-container">
            <button onclick="sendMessage('request')">request脚本</button>
        </div>
        <div class="button-container">
            <button onclick="clearMessages()">清空</button>
        </div>
        <h2>Messages:</h2>
        <pre id="messages" class="messages-output"></pre>
    </div>
    <div class="right">
        <h2>Console Output:</h2>
        <div class="button-container">
            <button onclick="clearConsole()">清空</button>
        </div>
        <div id="consoleOutput" class="console-output"></div>
    </div>
</body>
</html>
